var gulp = require('gulp');
var change = require('gulp-changed');
var connect = require('gulp-connect');
var postcss = require('gulp-postcss');
var px2rem = require('postcss-px2rem');
var sass = require('gulp-ruby-sass');
var src = {
    css:'./src/css/*.css',
    js:'./src/js/*.js',
    sass:'./src/css/font.scss',
    root:'./src/*.html',
    build:'./dist/'
};

gulp.task('server',function () {
    connect.server({
        root:'dist',
        port:8888,
        livereload:true
    })
});

gulp.task('watch',function () {
    gulp.watch(src.root,['html']);
    gulp.watch(src.js,['js']);
    gulp.watch(src.css,['css']);
    gulp.watch(src.sass,['sass']);
});
gulp.task('sass',function () {
    sass(src.sass,{style:'expanded'})
        .pipe(gulp.dest(src.build+'css'))
        .pipe(connect.reload());
});
gulp.task('html',function () {
    gulp.src(src.root)
        .pipe(gulp.dest(src.build))
        .pipe(connect.reload());
});

gulp.task('js',function () {
    gulp.src(src.js)
        .pipe(gulp.dest(src.build+'js'))
        .pipe(connect.reload());
});

gulp.task('css',function () {
    var processors = [px2rem({remUnit: 72})];
    gulp.src(src.css)
        .pipe(postcss(processors))
        .pipe(gulp.dest(src.build+'css'))
        .pipe(connect.reload());
});

gulp.task('default',['server','watch','html','js','css','sass']);